<template>
  <div class="dashboard">
    <MainSummary :device-detail="deviceDetail" />
    <Memory :device-detail="deviceDetail" :is-memory="true" />
    <Memory :device-detail="deviceDetail" :is-memory="false" />
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive } from 'vue'
import MainSummary from '@renderer/components/Summary.vue'
import Memory from '@renderer/components/Memory.vue'
import { useDeviceDetailStore } from '@renderer/store/deviceDetail'

export default defineComponent({
  name: 'Dashboard',
  components: {
    MainSummary,
    Memory
  },
  setup() {
    const ipcRenderer = window.electron.ipcRenderer

    const deviceDetail = reactive({
      totalMemory: 0,
      freeMemory: 0,
      usedMemory: 0,
      usedCpu: 0,
      totalDisk: 0,
      freeDisk: 0,
      usedDisk: 0,
      physicalCpuCount: 0,
      logicCpuCount: 0,
      diskName: '',
      processList: []
    })

    const deviceDetailStore = useDeviceDetailStore()

    ipcRenderer.on('get-deviceDetail', (_event, data) => {
      Object.assign(deviceDetail, data)
      deviceDetailStore.updateData(data)
    })

    onMounted(() => {
      ipcRenderer.send('dashboard-finished')
    })

    return {
      deviceDetail
    }
  }
})
</script>

<style lang="less" scoped>
.dashboard {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}
</style>
